import { ReactNode } from 'react';

import cn from 'classnames';

import cs from './ColouredInfoBlock.module.scss';

interface Props {
  children: ReactNode;
  className?: string;
  isPaddingLess?: boolean;
  reverseResponsive?: boolean;
}

export const ColouredInfoBlock = ({ children, className, isPaddingLess, reverseResponsive }: Props) => (
  <div
    className={cn(
      {
        [cs.containerPaddingLess]: isPaddingLess,
        [cs.containerReverse]: reverseResponsive,
        [cs.container]: !isPaddingLess && !reverseResponsive,
      },
      className,
    )}
  >
    {children}
  </div>
);
